import { Tag } from 'antd';
import React from 'react';
import Texty from 'ronds-react-ui/es/components/BaseTable/Texty';
import { CaretDownOutlined } from '@ant-design/icons';

interface INormalCellProps {
  label: string;
  value: any;
}

const RefCell = (props: INormalCellProps) => {
  const { label, value } = props;

  const [refInfo, setRefInfo] = React.useState<any[]>();

  React.useEffect(() => {
    console.log(value, typeof value);
    let _refId = [];
    if (value && typeof value === 'string') {
      _refId.push(value);
    } else {
      _refId = value;
    }

    const _refInfo = [
      {
        name: '马钢',
        type: 'Site',
        id: 'urn:uloveits2:Site:5NcJuXOTpp59K72xNwB3si',
      },
      {
        name: '宝钢',
        type: 'Site',
        id: 'urn:uloveits2:Site:5NcJuXOTpp59K72xNwB3si',
      },
    ];

    setRefInfo([..._refInfo]);
  }, [value]);

  return (
    <>
      <div className="node-info-block">
        <div className="node-info-block-line" />
        <div className="node-info-block-left-text pl-10">{label}</div>
        <div className="pl-10">
          {refInfo?.length === 1 ? (
            <Tag icon={<CaretDownOutlined />} color="volcano">
              {refInfo[0].type}
            </Tag>
          ) : (
            <Tag icon={<CaretDownOutlined />} color="magenta">
              Show {refInfo?.length} values
            </Tag>
          )}
        </div>
        {refInfo && refInfo?.length <= 1 && <div className="node-info-block-left-text">:</div>}
        <div className="node-info-block-right-text pl-10" style={{ flex: 1, width: '20px' }}>
          <Texty>{refInfo?.length === 1 && refInfo[0].name}</Texty>
        </div>
      </div>

      <div style={{ paddingLeft: '20px' }}>
        <div className="node-info-block" style={{ borderLeft: '1px solid #000' }}>
          <div className="node-info-block-line" />
          <div className="node-info-block-left-text pl-10">{label}</div>
        </div>
      </div>
    </>
  );
};

export default RefCell;
